<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0 auto;
        }

        .c1{
            background-color: red;
            height: 200px;
            width: 200px;
            /*浮动*/
            float: right;
        }

        .c2{
            background-color: gray;
            height: 200px;
            width: 200px;
            /*浮动*/
            float: left;
            /*清除浮动 左右都不能有浮动*/
            clear: both;
        }

        .c3{
            background-color: #222222;
            height: 200px;
            width: 200px;
            float: left;
        }
    </style>
</head>
<body>

<!--注意浏览器加载源码的顺序，永远是从上往下加载代码-->

<!-- 解决父级坍塌现象
clear语法：
clear : none | left | right | both

取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象

但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素
-->

<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>

</body>
</html>
